@for $i from 1 through 1000 {
    .w-#{$i} {
        width: #{$i}px;
    }

    .\!w-#{$i} {
        width: #{$i}px !important;
    }

    .h-#{$i} {
        height: #{$i}px;
    }

    .\!h-#{$i} {
        height: #{$i}px;
    }

    .pt-#{$i} {
        padding-top: #{$i}px;
    }

    .pb-#{$i} {
        padding-bottom: #{$i}px;
    }

    .pl-#{$i} {
        padding-left: #{$i}px;
    }

    .pr-#{$i} {
        padding-right: #{$i}px;
    }

    .mt-#{$i} {
        margin-top: #{$i}px;
    }

    .mb-#{$i} {
        margin-bottom: #{$i}px;
    }

    .ml-#{$i} {
        margin-left: #{$i}px;
    }

    .mr-#{$i} {
        margin-right: #{$i}px;
    }
}


.bg-red {
    background-color: red;
}

$my-color: #ff0000;
@debug inspect($my-color); // 在控制台中输出：DEBUG: #ff0000

@mixin set-bg-color($color, $selector: '.bg') {

    // 如果 $color 是以 '#' 开头的，说明是十六进制颜色值（例如 '#ff0000'）
    @if str-slice($color, 1, 1)=='#' {
        // 将 $color 作为背景颜色值，拼接到 $selector 后面，并生成対应的类名
        #{$selector}-#{$color} {
            background-color: $color;
        }
    }

    // 如果 $color 不以 '#' 开头，则说明是颜色名（例如 'red'）
    @else {
        // 在一个 map 中定义各种颜色值
        $colors: ('red': #de3618,
            'orange': #f6993f,
            'yellow': #ffed4a,
            'green': #48bb78,
            'blue': #007ace,
            'indigo': #5c6ac4,
            'purple': #805ad5,
            'pink': #ff69b4,
            'gray': #999999,
            'black': #333333,
            // ... 可以添加更多的颜色
        );

        // 如果 $colors 中定义了与 $color 相同的颜色名，则使用対应的颜色值
        @if map-has-key($colors, $color) {
            $value: map-get($colors, $color);

            #{$selector}-#{$color} {
                background-color: $value;
            }
        }

        // 如果 $colors 中没有定义与 $color 相同的颜色名，则将 $color 解析为变量，再作为背景颜色值
        @else {
            $value: #{$color};

            #{$selector}-#{$color} {
                background-color: $value;
            }
        }
    }
}